<template>
  <!-- 试题录入 -->
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="new-container">
        <el-card>
          <el-row class="text">{{ formlist.id ? '试题编辑' : '试题录入' }}</el-row>
          <hr style="background-color:#ccc; height:1px; border:none;">
          <el-form ref="formRef" :model="formlist" :rules="rules" label-width="80px">
            <el-form-item label="学科:" label-width="100px" prop="subjectID">
              <el-select
                v-model="formlist.subjectID"
                placeholder="请选择活动区域"
                style="width:400px;"
                @change="selectChange"
              >
                <el-option
                  v-for="item in lists"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="二级目录:" label-width="100px" prop="catalogID">
              <el-select v-model="formlist.catalogID" placeholder="请选择" style="width:400px;">
                <el-option
                  v-for="item in direList"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="企业：" label-width="100px" prop="enterpriseID">
              <el-select v-model="formlist.enterpriseID" placeholder="请选择活动区域" style="width:400px;">
                <el-option
                  v-for="item in comlist"
                  :key="item.id"
                  :label="item.company"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="城市：" label-width="100px" prop="province">
              <el-select
                v-model="formlist.province"
                placeholder="请选择活动区域"
                style="width:200px;"
                @change="renderCity()"
              >
                <el-option
                  v-for="(item , index ) in provinceAll"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
              <el-select v-model="formlist.city" placeholder="请选择活动区域" style="width:200px;">
                <el-option
                  v-for="(item , index ) in cityAll"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向：" label-width="100px" prop="direction">
              <el-select v-model="formlist.direction" placeholder="请选择活动区域" style="width:400px;">
                <el-option label="互联网" value="1"></el-option>
                <el-option label="电子商务" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题型：" label-width="100px" prop="questionType">
              <el-radio-group v-model="formlist.questionType" @change="questClick()">
                <el-radio label="1">单选</el-radio>
                <el-radio label="2">多选</el-radio>
                <el-radio label="3">简答</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="难度：" label-width="100px" prop="difficulty">
              <el-radio-group v-model="formlist.difficulty">
                <el-radio label="1">简单</el-radio>
                <el-radio label="2">一般</el-radio>
                <el-radio label="3">困难</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题干: " label-width="100px" prop="question">
              <quill-editor
                v-model="formlist.question"
                :options="editorOption"
                style="width:600px;"
              ></quill-editor>
            </el-form-item>

            <!-- 选项 -->
            <el-form-item v-if="formlist.questionType !== '3'" label="选项">
              <!-- 复选 -->
              <div v-if="formlist.questionType === '2'">
                <el-checkbox-group v-if="formlist.id" v-model="checkItem">
                  <el-row v-for="(item, index) in formlist.options" :key="index" type="flex">
                    <el-col>
                      <el-checkbox :label="item.code" :checked="item.isRight === 1"></el-checkbox>
                      <el-input
                        v-model="item.title"
                        style="width: 80%; margin-left: 8px;"
                      >{{ item.title }}</el-input>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
                <el-checkbox-group v-else v-model="checkItem">
                  <el-row v-for="item in formlist.options" :key="item.id" type="flex">
                    <el-col>
                      <el-checkbox :label="item.code"></el-checkbox>
                      <el-input
                        v-model="item.title"
                        style="width: 80%; margin-left: 8px;"
                      >{{ item.title }}</el-input>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </div>
              <!-- 单选 -->
              <div v-if="formlist.questionType === '1'">
                <el-radio-group v-if="formlist.id" v-model="radio">
                  <el-row v-for="(item, index) in formlist.options" :key="index" type="flex">
                    <el-col>
                      <el-row type="flex">
                        <el-col :span="6">
                          <el-radio :label="item.code">{{ item.code }}</el-radio>
                        </el-col>
                        <el-col>
                          <el-input
                            v-model="item.title"
                            style="width: 400px; margin-left: 8px; margin-bottom: 4px;"
                          >{{ item.title }}</el-input>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-radio-group>
                <el-radio-group v-else v-model="radio1">
                  <el-row v-for="(item, index) in formlist.options" :key="index" type="flex">
                    <el-col>
                      <el-row type="flex">
                        <el-col :span="6">
                          <el-radio :label="item.code"></el-radio>
                        </el-col>
                        <el-col>
                          <el-input
                            v-model="item.title"
                            style="width: 400px; margin-left: 8px; margin-bottom: 4px;"
                          >{{ item.title }}</el-input>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-radio-group>
              </div>
              <!-- 新增 -->
              <el-row>
                <el-button
                  icon="el-icon-plus"
                  type="danger"
                  :disabled="formlist.questionType !== '2'"
                  @click="addAnsQues"
                >增加选项与答案</el-button>
              </el-row>
            </el-form-item>
            <!-- 选项结束 -->
            <el-form-item label="解析视频：" label-width="100px" prop="videoURL">
              <el-input v-model="formlist.videoURL" style="width:400px;"></el-input>
            </el-form-item>
            <!-- 答案解析 -->
            <el-form-item label="答案解析：" label-width="100px" prop="answer">
              <quill-editor v-model="formlist.answer" :options="editorOption" style="width:600px;"></quill-editor>
            </el-form-item>
            <el-form-item label="题目备注：" label-width="100px" prop="remarks">
              <el-input v-model="formlist.remarks" type="textarea" style="width:400px;"></el-input>
            </el-form-item>
            <el-form-item label="试题标签：" label-width="100px" prop="tags">
              <el-select v-model="value1" multiple placeholder="请选择" @visible-change="changeTags">
                <el-option
                  v-for="item in tagsItem"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.tagName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-row :gutter="20">
            <el-col :span="6" :offset="4">
              <el-button type="primary" @click="btnOK()">确认提交</el-button>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { provinces, citys } from '@/assets/citys'
import { companyslist } from '@/api/companys.js'
import { subjectlistTwo, subjectList } from '@/api/subjects.js'
import { getTagsList } from '@/api/tags'
import { getDirectoryList } from '@/api/directorys'
// editChoiceList,
import { ChoiceList, addChoiceList, AddTags, editChoiceList } from '@/api/choice.js'
export default {
  name: 'OK',
  components: {},
  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      checkList: [], // 复选框
      checkItem: [],
      // 选项
      value1: [],
      Options: [],
      userId: this.$route.params.id,
      option: 1,
      comlist: [],
      // 二级列表
      listsTwo: [],
      direList: [],
      lists: [],
      // 城市
      provinceAll: [],
      cityAll: [],
      // 富文本
      editorOption: {
        modules: {
          toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], ['blockquote', 'code-block', 'image', 'link']]
        }
      },
      // formlistS: [],
      formlist: {
        shortName: '',
        Subject: '',
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        answerID: '',
        remarks: '',
        tags: '', // 试题标签
        options: [
          {
            code: 'A',
            isRight: 0,
            title: ''
          },
          {
            code: 'B',
            isRight: 0,
            title: ''
          },
          {
            code: 'C',
            isRight: 0,
            title: ''
          },
          {
            code: 'D',
            isRight: 0,
            title: ''
          }
        ]
      },
      rules: {
        remarks: [{ required: true, message: '学科不能为空', trigger: 'blur' }],
        tags: [{ required: true, message: '学科不能为空', trigger: 'blur' }],
        videoURL: [{ required: true, message: '学科不能为空', trigger: 'blur' }],
        shortName: [{ required: true, message: '学科不能为空', trigger: 'blur' }],
        twoLevelDirectory: [{ required: true, message: '学科不能为空', trigger: 'blur' }],
        subjectID: [{ required: true, message: '学科不能为空', trigger: 'blur' }],
        catalogID: [{ required: true, message: '目录不能为空', trigger: 'blur' }],
        enterpriseID: [{ required: true, message: '企业不能为空', trigger: 'blur' }],
        province: [{ required: true, message: '省份不能为空', trigger: 'blur' }],
        city: [{ required: true, message: '城市不能为空', trigger: 'blur' }],
        direction: [{ required: true, message: '方向不能为空', trigger: 'blur' }],
        questionType: [{ required: true, message: '题型不能为空', trigger: 'blur' }],
        difficulty: [{ required: true, message: '难度不能为空', trigger: 'blur' }],
        question: [{ required: true, message: '题干不能为空', trigger: 'blur' }],
        answer: [{ required: true, message: '答案解析不能为空', trigger: 'blur' }]
      },
      tagsItem: [],
      radio: '',
      radio1: '',
      num: 65
    }
  },
  computed: {},
  watch: {},
  created() {
    // 获取学科列表
    this.subjectList()
    this.provinceAll = provinces()
    // 基础题库详情
    this.ChoiceList()
    // 企业数据
    this.companyslist()
    this.AddTags()
    // 单选框回显
    this.getDanXuan()
  },
  mounted() {},
  methods: {
    // 单选框回显
    getDanXuan() {
      setTimeout(() => {
        if (this.formlist.questionType === '1' && this.formlist.id) {
          this.formlist.options.forEach(item => {
            if (item.isRight === 1) {
              this.radio = item.code
            }
          })
        }
      }, 300)
    },
    // 获取学科列表
    async subjectList() {
      const { data } = await subjectList()
      const res = await subjectlistTwo(data.subjectID)
      const dires = await getDirectoryList({ page: 1, pagesize: 100, subjectID: this.formlist.subjectID })
      const results = await getTagsList({ page: 1, pagesize: 100, subjectID: this.formlist.subjectID })
      this.tagsItem = results.data.items
      console.log(results.data)
      this.direList = dires.data.items
      this.listsTwo = res.data
      this.lists = data
    },
    // 学科
    async selectChange() {
      this.formlist.catalogID = null
      const { data } = await subjectlistTwo(this.formlist.subjectID)
      const res = await getTagsList({ page: 1, pagesize: 100, subjectID: this.formlist.subjectID })
      const dires = await getDirectoryList({ page: 1, pagesize: 100, subjectID: this.formlist.subjectID })
      this.direList = dires.data.items
      this.tagsItem = res.data.items
      this.listsTwo = data
    },
    // 城市
    renderCity() {
      this.cityAll = citys(this.formlist.province)
    },
    // 企业数据
    async companyslist() {
      const { data } = await companyslist()
      this.comlist = data.items
    },
    // 基础题库详情
    async ChoiceList() {
      if (this.userId) {
        const { data } = await ChoiceList(this.userId)
        this.formlist = data
        this.value1 = data.tags.split(',')
        // console.log(data.tags)
      }
    },
    // 提交
    btnOK() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          if (this.formlist.id) {
            // 编辑
            if (this.formlist.questionType === '1') {
              // 修改单选
              this.formlist.options.forEach(item => {
                item.isRight = 0
                if (item.code === this.radio) {
                  item.isRight = 1
                }
              })
            } else if (this.formlist.questionType === '2') {
              // 修改多选
              this.formlist.options.forEach(item => {
                item.isRight = 0
                this.checkItem.forEach(code => {
                  if (item.code === code) {
                    item.isRight = 1
                  }
                })
              })
            }
            await editChoiceList(this.formlist)
            this.radio1 = ''
            this.checkItem = []
            this.formlist = {
              subjectID: '', // 学科名称
              catalogID: '', // 目录
              enterpriseID: '', // 企业
              direction: '', // 方向
              province: '', // 城市
              city: '', // 地区
              questionType: '1', // 试题类型
              difficulty: '1', // 试题难度
              question: '', // 题干
              options: [
                {
                  code: 'A',
                  isRight: 0,
                  title: ''
                },
                {
                  code: 'B',
                  isRight: 0,
                  title: ''
                },
                {
                  code: 'C',
                  isRight: 0,
                  title: ''
                },
                {
                  code: 'D',
                  isRight: 0,
                  title: ''
                }
              ]
            }
            this.$message.success('编辑成功！')
            // 新增修改后跳转到基础题库
            this.$router.push('/xueke/table')
          } else {
            // 新增
            if (this.formlist.questionType === '1') {
              // 添加单选
              this.formlist.options.forEach(item => {
                if (item.code === this.radio1) {
                  item.isRight = 1
                }
              })
            } else if (this.formlist.questionType === '2') {
              // 添加多选
              this.formlist.options.forEach(item => {
                this.checkItem.forEach(code => {
                  if (item.code === code) {
                    item.isRight = 1
                  }
                })
              })
            }
            await addChoiceList(this.formlist)
            this.$router.push('/questions/list')
            this.radio1 = ''
            this.checkItem = []
            this.formlist = {
              subjectID: '', // 学科名称
              catalogID: '', // 目录
              enterpriseID: '', // 企业
              direction: '', // 方向
              province: '', // 城市
              city: '', // 地区
              questionType: '1', // 试题类型
              difficulty: '1', // 试题难度
              question: '', // 题干
              options: [
                {
                  code: 'A',
                  isRight: 0,
                  title: ''
                },
                {
                  code: 'B',
                  isRight: 0,
                  title: ''
                },
                {
                  code: 'C',
                  isRight: 0,
                  title: ''
                },
                {
                  code: 'D',
                  isRight: 0,
                  title: ''
                }
              ]
            }
            this.$message.success('新增成功！')
            this.$router.push('/xueke/table')
          }
        }
      })
    },
    // 试题标签
    changeTags(val) {
      if (!val) {
        this.formlist.tags = this.value1.join(',')
      }
    },
    // 标签
    async AddTags() {
      if (this.userId) {
        const { data } = await AddTags(this.userId)
        this.tagsItem = data.items
        this.value1 = data.items.tags.split(',')
      }
    },
    rdClick() {
      this.option = 1
    },
    // 增加选项
    addAnsQues() {
      const sum = this.num + this.formlist.options.length
      // console.log(sum)
      this.formlist.options.push({
        code: String.fromCharCode(sum),
        isRight: 0,
        title: ''
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.text {
  font-size: 18px;
  line-height: 50px;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
